<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Pragma" content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
  <meta http-equiv="Expires" content="0" />
</head>

<body style="width: 100%; height: 100%; overflow: hidden; margin: 0; background-color: #38353D; color: #ffffff;">
  <div style="padding: 4px 20px 0 20px;display: flex;justify-content: space-between;">
    <!-- <div style="display: flex; align-items: center; justify-content: space-between; height: 40px; background-color: #45424A;">
      <div style="padding: 0 15px;">基本信息</div>
      <div style="display: flex;">
        <div>实时视频</div>
        <div style="padding: 0 15px;">|</div>
        <div style="color: #9D9D9D;">视频回放</div>
      </div>
      <div style="padding: 0 15px;">
        <span>返回</span>
      </div>
    </div> -->
    <div style="background-color: #535157;width: calc(100% - 315px); height: calc(100vh - 22px);">
      <div id="divPlugin" style="width: 100%; height: 100%; min-height: 400px;" class="plugin"></div>
    </div>
    <div id="PTZControl" style="width: 300px;height: calc(100vh - 22px); overflow-y: auto; background-color: #535157;">
      <h3 style="text-align: center;">云台控制</h3>
      <div
        style="margin: 80px auto 50px; width: 174px; height: 174px; border-radius: 100px; border: 1px solid #A8A7B1; background-color: #6B6A74; box-sizing: border-box; position: relative; overflow: hidden;">

        <div style="transform: rotate(45deg); position: absolute; top: -1px; display: flex; flex-direction: column;">
          <div style="display: flex;">
            <div style="width: 87px; height: 87px; border: 1px solid #A8A7B1; box-sizing: border-box; display: inline-block; cursor: pointer;" title="上"
              onmousedown="mouseDownPTZControl(1);" onmouseup="mouseUpPTZControl();">
              <div style="transform: rotate(-45deg); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
                <img src="./ico_up.png" style="width: 32px; height: 32px;" alt="" srcset="">
                <!-- <span>上</span> -->
              </div>
            </div>
            <div style="width: 87px; height: 87px; border: 1px solid #A8A7B1; box-sizing: border-box; display: inline-block; cursor: pointer;" title="右"
              onmousedown="mouseDownPTZControl(4);" onmouseup="mouseUpPTZControl();">
              <div style="transform: rotate(45deg); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
                <img src="./ico_up.png" style="width: 32px; height: 32px;" alt="" srcset="">
                <!-- <span>右</span> -->
              </div>
            </div>
          </div>
          <div style="display: flex;">
            <div style="width: 87px; height: 87px; border: 1px solid #A8A7B1; box-sizing: border-box; display: inline-block; cursor: pointer;" title="左"
              onmousedown="mouseDownPTZControl(3);" onmouseup="mouseUpPTZControl();">
              <div style="transform: rotate(-135deg); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
                <img src="./ico_up.png" style="width: 32px; height: 32px;" alt="" srcset="">
                <!-- <span>左</span> -->
              </div>
            </div>
            <div style="width: 87px; height: 87px; border: 1px solid #A8A7B1; box-sizing: border-box; display: inline-block; cursor: pointer;" title="下"
              onmousedown="mouseDownPTZControl(2);" onmouseup="mouseUpPTZControl();">
              <div style="transform: rotate(135deg); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
                <img src="./ico_up.png" style="width: 32px; height: 32px;" alt="" srcset="">
                <!-- <span>下</span> -->
              </div>
            </div>
          </div>
        </div>
        <div
          style="position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); z-index: 10; width: 60px; height: 60px; border-radius: 30px; display: flex;justify-content: center;align-items: center; background-color: #A9A7B1; cursor: pointer;"
          title="自动" onclick="mouseDownPTZControl(9);">
          <img src="./ico_9.png" style="width: 32px; height: 32px;" alt="" srcset="">
        </div>
      </div>
      <div style="padding: 5px 20px;">
        <span>变倍</span>
        <input type="range" min="0" max="200" value="100" step="1" onchange="changePTZZoom(this.value)">
      </div>
      <div style="padding: 5px 20px;">
        <span>变焦</span>
        <input type="range" min="0" max="200" value="100" step="1" onchange="changePTZFocus(this.value)">
      </div>
      <div style="margin-top: 60px;">
        <div style="width: 180px; margin: auto;text-align: center; background-color: #63626A;padding: 10px 19px;border-radius: 20px; cursor: pointer;"
          onclick="clickCapturePic('preview');">
          截屏
        </div>
      </div>
      <fieldset class="ptz">
        <legend>云台控制</legend>
        <table cellpadding="0" cellspacing="3" border="0" class="left">
          <tr>
            <td>
              <input type="button" class="btn" value="左上" onmousedown="mouseDownPTZControl(5);" onmouseup="mouseUpPTZControl();" />
              <input type="button" class="btn" value="上" onmousedown="mouseDownPTZControl(1);" onmouseup="mouseUpPTZControl();" />
              <input type="button" class="btn" value="右上" onmousedown="mouseDownPTZControl(7);" onmouseup="mouseUpPTZControl();" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="button" class="btn" value="左" onmousedown="mouseDownPTZControl(3);" onmouseup="mouseUpPTZControl();" />
              <input type="button" class="btn" value="自动" onclick="mouseDownPTZControl(9);" />
              <input type="button" class="btn" value="右" onmousedown="mouseDownPTZControl(4);" onmouseup="mouseUpPTZControl();" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="button" class="btn" value="左下" onmousedown="mouseDownPTZControl(6);" onmouseup="mouseUpPTZControl();" />
              <input type="button" class="btn" value="下" onmousedown="mouseDownPTZControl(2);" onmouseup="mouseUpPTZControl();" />
              <input type="button" class="btn" value="右下" onmousedown="mouseDownPTZControl(8);" onmouseup="mouseUpPTZControl();" />
            </td>
          </tr>
        </table>
        <table cellpadding="0" cellspacing="3" border="0" class="left">
          <tr>
            <td class="tt"><input type="button" class="btn2" value="变倍+" onmousedown="PTZZoomIn()" onmouseup="PTZZoomStop()"></td>
            <td><input type="button" class="btn2" value="变倍-" onmousedown="PTZZoomout()" onmouseup="PTZZoomStop()"></td>
          </tr>
          <tr>
            <td class="tt"><input type="button" class="btn2" value="变焦+" onmousedown="PTZFocusIn()" onmouseup="PTZFoucusStop()"></td>
            <td><input type="button" class="btn2" value="变焦-" onmousedown="PTZFoucusOut()" onmouseup="PTZFoucusStop()"></td>
          </tr>
        </table>
      </fieldset>
    </div>
  </div>
</body>
<script src="./jquery-1.7.1.min.js"></script>
<script id="videonode" src="./webVideoCtrl.js"></script>
<script>
  // 初始化插件

  // 全局保存当前选中窗口
  var g_iWndIndex = 0 //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
  var g_oLocalConfig = null //本地配置

  //错误码
  //通用错误
  var ERROR_CODE_UNKNOWN = 1000 //未知错误
  var ERROR_CODE_NETWORKERROR = 1001 //网络错误
  var ERROR_CODE_PARAMERROR = 1002 //缺少插件元素

  //登录模块
  var ERROR_CODE_LOGIN_NOLOGIN = 2000 // 未登录
  var ERROR_CODE_LOGIN_REPEATLOGIN = 2001 //设备已登录，重复登录
  var ERROR_CODE_LOGIN_NOSUPPORT = 2002 //当前设备不支持Digest登录

  //预览播放
  var ERROR_CODE_PLAY_PLUGININITFAIL = 3000 //插件初始化失败
  var ERROR_CODE_PLAY_NOREPEATPLAY = 3001 //当前窗口已经在预览
  var ERROR_CODE_PLAY_PLAYBACKABNORMAL = 3002 //回放异常
  var ERROR_CODE_PLAY_PLAYBACKSTOP = 3003 //回放停止
  var ERROR_CODE_PLAY_NOFREESPACE = 3004 //录像过程中，硬盘容量不足

  //对讲
  var ERROR_CODE_TALK_FAIL = 5000 //语音对讲失败

  var version = 'V3.3.0build20230322';
  var params = {};
  $(function () {
    if (window.location.search) {
      var parts = window.location.search.substring(1).split('&')
      for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split('=')
        if (!nv[0]) continue
        params[nv[0]] = nv[1] || true
      }
    }
    var currentId = params.id
    var rc = params.rc
    if (rc == "false") {
      $("#PTZControl").hide();
      $("#divPlugin").css("width", "100%");
      // $("#divPlugin").attr("style", "position: relative; width: 1150px; height: 780px; left: 450px; top: 110px");
    }
    setTimeout(() => {
      resize();
      // 初始化插件参数及插入插件
      WebVideoCtrl.I_InitPlugin({
        bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        iWndowType: 1,
        cbSelWnd: function (xmlDoc) {
          g_iWndIndex = parseInt($(xmlDoc).find('SelectWnd').eq(0).text(), 10)
          var szInfo = '当前选择的窗口编号：' + g_iWndIndex
          showCBInfo(szInfo)
        },
        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
          var szInfo = '当前放大的窗口编号：' + iWndIndex
          if (!bFullScreen) {
            szInfo = '当前还原的窗口编号：' + iWndIndex
          }
          showCBInfo(szInfo)
        },
        cbEvent: function (iEventType, iParam1, iParam2) {
          if (2 == iEventType) {
            // 回放正常结束
            showCBInfo('窗口' + iParam1 + '回放结束！')
          } else if (-1 == iEventType) {
            showCBInfo('设备' + iParam1 + '网络错误！')
          } else if (3001 == iEventType) {
            clickStopRecord(g_szRecordType, iParam1)
          }
        },
        cbInitPluginComplete: function () {
          WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin').then(
            () => {
              console.log(currentId);
              clickStartRealPlay()
              WebVideoCtrl.I_CheckPluginVersion().then((bFlag) => {
                if (bFlag) {
                  alert('检测到新的插件版本，双击开发包目录里的HCWebSDKPlugin.exe升级！')
                }
              })
            },
            () => {
              alert('插件初始化失败，请确认是否已安装插件；如果未安装，请双击开发包目录里的HCWebSDKPlugin.exe安装！')
            },
          )
        },
      });
    }, 1000);
  });
  $(window).on('resize', resize);

  function resize() {
    if (!window.frameElement) {
      return;
    }
    // 解决iframe中嵌入海康插件初始化问题:
    // 1. 获取iframe相比于窗口的偏移量;
    const offset = window.parent.document.elementFromPoint(
      window.frameElement.getBoundingClientRect().left,
      window.frameElement.getBoundingClientRect().top
    ).getBoundingClientRect();
    // console.log('父级元素的偏移量:', offset);
    if (offset && (offset.top || offset.left)) {
      $("#divPlugin").css("margin-top", Number(offset.top) + "px");
      $("#divPlugin").css("margin-left", Number(offset.left) + "px");
      // $("#divPlugin").css("width", `calc(100% - ${Number(offset.left)}px)`);
      // $("#divPlugin").css("height", `calc(100vh - ${Number(offset.top) + 80}px)`);
      // let newWidth = $("#divPlugin").width();
      // let newheight = $("#divPlugin").height();
      // if (WebVideoCtrl) {
      //   WebVideoCtrl.I_Resize(newWidth, newheight);
      // }
    }
  }
  // 开始预览-改写
  function clickStartRealPlay() {
    console.log("开始登录");
    var ipselectData = params.id || "";
    var ipdata = ipselectData.split('_')
    var szIP = ipdata[0]
    var ipAndPort = szIP.split(':')
    var rtspPort = ipdata[1]
    var currentIp = ipAndPort[0]
    var currentPort = ipAndPort[1]
    var szPort = currentPort,
      szUsername = 'admin',
      szPassword = '123456789a'
    var szDeviceIdentify = currentIp + '_' + currentPort;
    WebVideoCtrl.I_Login(currentIp, 1, szPort, szUsername, szPassword, {
      timeout: 3000,
      success: function (xmlDoc) {
        showOPInfo(szDeviceIdentify + " 登录成功！");
        show2(1, szDeviceIdentify, rtspPort)
      },
      error: function (oError) {
        if (ERROR_CODE_LOGIN_REPEATLOGIN === status) {
          showOPInfo(szDeviceIdentify + " 已登录过！");
          show2(1, szDeviceIdentify, rtspPort)
        } else {
          showOPInfo(szDeviceIdentify + " 登录失败！", oError.errorCode, oError.errorMsg);
        }
      },
    })
  }
  /** 预览 */
  function show2(iChannelID, szDeviceIdentify, rtspPort) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      iRtspPort = rtspPort,
      iChannelID = parseInt(iChannelID, 10),
      bZeroChannel = false,
      szInfo = ''
    var startRealPlay = function () {
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iStreamType: 1,
        iChannelID: iChannelID,
        bZeroChannel: bZeroChannel,
        success: function () {
          szInfo = '开始预览成功！'
          showOPInfo(szDeviceIdentify + " " + szInfo);
        },
        error: function (oError) {
          showOPInfo(szDeviceIdentify + " 开始预览失败！", oError.errorCode, oError.errorMsg);
        },
      })
    }

    if (oWndInfo != null) {
      // 已经在播放了，先停止
      WebVideoCtrl.I_Stop({
        success: function () {
          startRealPlay()
        },
      })
    } else {
      startRealPlay()
    }
  }
  // PTZ控制 9为自动，1,2,3,4,5,6,7,8为方向PTZ
  var g_bPTZAuto = false
  function mouseDownPTZControl(iPTZIndex) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      bZeroChannel = false,
      iPTZSpeed = 1

    if (bZeroChannel) {
      // 零通道不支持云台
      return
    }

    if (oWndInfo != null) {
      if (9 == iPTZIndex && g_bPTZAuto) {
        iPTZSpeed = 0 // 自动开启后，速度置为0可以关闭自动
      } else {
        g_bPTZAuto = false // 点击其他方向，自动肯定会被关闭
      }

      WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
        iPTZSpeed: iPTZSpeed,
        success: function (xmlDoc) {
          if (9 == iPTZIndex && g_bPTZAuto) {
            showOPInfo(oWndInfo.szDeviceIdentify + ' 停止云台成功！')
          } else {
            showOPInfo(oWndInfo.szDeviceIdentify + ' 开启云台成功！')
          }
          if (9 == iPTZIndex) {
            g_bPTZAuto = !g_bPTZAuto
          }
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 开启云台失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  // 方向PTZ停止
  function mouseUpPTZControl() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(1, true, {
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 停止云台成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 停止云台失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }
  /** 设置变倍默认值值100 */
  let zoomDefault = 100;
  // 改变变倍数据
  function changePTZZoom(params) {
    const num = parseInt(params, 10);
    let diffNum = 0;
    if (num === zoomDefault) {
      return;
    } else if (num > zoomDefault) {
      diffNum = num - zoomDefault;
      for (let index = 1; index <= diffNum; index++) {
        PTZZoomIn(index === diffNum);
        // if (index === diffNum) {
        //   // console.log("结束");
        //   PTZZoomStop();
        // }
      }
    } else {
      diffNum = zoomDefault - num;
      for (let index = 1; index <= diffNum; index++) {
        PTZZoomout(index === diffNum);
        // if (index === diffNum) {
        //   // console.log("结束");
        //   PTZZoomStop();
        // }
      }
    }
    console.log(2222, params);
  }
  function PTZZoomIn(stop) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(10, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调焦+成功！');
          if (stop) {
            PTZZoomStop();
          }
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  调焦+失败！', oError.errorCode, oError.errorMsg);
          if (stop) {
            PTZZoomStop();
          }
        },
      })
    }
  }

  function PTZZoomout(stop) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(11, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调焦-成功！');
          if (stop) {
            PTZZoomStop();
          }
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  调焦-失败！', oError.errorCode, oError.errorMsg); if (stop) {
            PTZZoomStop();
          }
        },
      })
    }
  }

  function PTZZoomStop() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(11, true, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 调焦停止成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  调焦停止失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  /** 设置变焦默认值值100 */
  let focusDefault = 100;
  // 改变变焦数据
  function changePTZFocus(params) {
    const num = parseInt(params, 10);
    let diffNum = 0;
    if (num === focusDefault) {
      return;
    } else if (num > focusDefault) {
      diffNum = num - focusDefault;
      for (let index = 1; index <= diffNum; index++) {
        PTZFocusIn(index === diffNum);
      }
    } else {
      diffNum = focusDefault - num;
      for (let index = 1; index <= diffNum; index++) {
        PTZFoucusOut(index === diffNum);
      }
    }
  }
  function PTZFocusIn(stop) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(12, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 聚焦+成功！');
          if (stop) {
            PTZFoucusStop();
          }
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  聚焦+失败！', oError.errorCode, oError.errorMsg);
          if (stop) {
            PTZFoucusStop();
          }
        },
      })
    }
  }

  function PTZFoucusOut(stop) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(13, false, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 聚焦-成功！');
          if (stop) {
            PTZFoucusStop();
          }
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  聚焦-失败！', oError.errorCode, oError.errorMsg);
          if (stop) {
            PTZFoucusStop();
          }
        },
      })
    }
  }

  function PTZFoucusStop() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)

    if (oWndInfo != null) {
      WebVideoCtrl.I_PTZControl(12, true, {
        iWndIndex: g_iWndIndex,
        success: function (xmlDoc) {
          showOPInfo(oWndInfo.szDeviceIdentify + ' 聚焦停止成功！')
        },
        error: function (oError) {
          showOPInfo(oWndInfo.szDeviceIdentify + '  聚焦停止失败！', oError.errorCode, oError.errorMsg)
        },
      })
    }
  }

  // 抓图
  function clickCapturePicData() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = "";
    if (oWndInfo != null) {
      WebVideoCtrl.I_CapturePicData().then(function (data) {
        console.log(data);
        szInfo = "抓图上传成功！";
        showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);

        var link = document.createElement('a');
        link.href = "data:image/jpeg;base64," + data;;
        link.download = "image.jpg";

        // 触发点击事件以保存图像
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }, function () {
        szInfo = "抓图失败！";
        showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
      });
    }
  }
  function showOPInfo(szInfo, status, xmlDoc) {
    var szTip = "<div>" + szInfo;
    if (typeof status != "undefined" && status != 200) {
      var szStatusString = $(xmlDoc).find("statusString").eq(0).text();
      var szSubStatusCode = $(xmlDoc).find("subStatusCode").eq(0).text();
      if ("" === szSubStatusCode) {
        if ("" === szSubStatusCode && "" === szStatusString) {
          szTip += "(" + status + ")";
        }
        else {
          szTip += "(" + status + ", " + szStatusString + ")";
        }
      } else {
        szTip += "(" + status + ", " + szSubStatusCode + ")";
      }
    }
    szTip += "</div>";

    console.log(szTip);
  }

  // 显示操作信息

  // 设置本地参数
  // 源代码开始


  // 显示回调信息
  function showCBInfo(szInfo) {
    szInfo = "<div>" + szInfo + "</div>";
    console.log(szInfo);
  }

  // 获取窗口尺寸
  function getWindowSize() {
    var nWidth = $(this).width() + $(this).scrollLeft(),
      nHeight = $(this).height() + $(this).scrollTop();

    return { width: nWidth, height: nHeight };
  }

  // 窗口分割数
  function changeWndNum(iType) {
    iType = parseInt(iType, 10);
    WebVideoCtrl.I_ChangeWndNum(iType).then(() => {
      showOPInfo("窗口分割成功！");
    }, (oError) => {
      var szInfo = "窗口分割失败！";
      showOPInfo(szInfo, oError.errorCode, oError.errorMsg);
    });
  }

  // 停止预览
  function clickStopRealPlay() {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = "";

    if (oWndInfo != null) {
      WebVideoCtrl.I_Stop({
        success: function () {
          szInfo = "停止预览成功！";
          showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
        },
        error: function (oError) {
          showOPInfo(szDeviceIdentify + " 停止预览失败！", oError.errorCode, oError.errorMsg);
        }
      });
    }
  }

  // 抓图
  async function clickCapturePic(szType) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
      szInfo = "";

    if (oWndInfo != null) {
      var oLocalConfig = await WebVideoCtrl.I_GetLocalCfg();
      var szCaptureFileFormat = "0";
      if (oLocalConfig) {
        szCaptureFileFormat = oLocalConfig.captureFileFormat;
      }

      var szChannelID = "szChannelID";//$("#channels").val();
      var szPicName = oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime();
      //如果是回放抓图，需要增加如下前缀："playback_"
      if ("playback" === szType) {
        szPicName = "playback_" + oWndInfo.szDeviceIdentify + "_" + szChannelID + "_" + new Date().getTime();
      }

      szPicName += ("0" === szCaptureFileFormat) ? ".jpg" : ".bmp";

      WebVideoCtrl.I_CapturePic(szPicName, {
        bDateDir: true  //是否生成日期文件
      }).then(function () {
        szInfo = "抓图成功！";
        showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
      }, function (oError) {
        szInfo = " 抓图失败！";
        showOPInfo(oWndInfo.szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
      });
    }
  }

  // 开始录像
  var g_szRecordType = "";

  // 停止录像
  function clickStopRecord(szType, iWndIndex) {
    if ("undefined" === typeof iWndIndex) {
      iWndIndex = g_iWndIndex;
    }
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(iWndIndex),
      szInfo = "";

    if (oWndInfo != null) {
      WebVideoCtrl.I_StopRecord({
        success: function () {
          if ('realplay' === szType) {
            szInfo = "停止录像成功！";
          } else if ('playback' === szType) {
            szInfo = "停止剪辑成功！";
          }
          showOPInfo(oWndInfo.szDeviceIdentify + " " + szInfo);
        },
        error: function (oError) {
          if ('realplay' === szType) {
            szInfo = "停止录像失败！";
          } else if ('playback' === szType) {
            szInfo = "停止剪辑失败！";
          }
          sshowOPInfo(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg);
        }
      });
    }
  }

  // 全屏
  function clickFullScreen() {
    WebVideoCtrl.I_FullScreen(true).then(() => {
      showOPInfo("全屏成功");
    }, (oError) => {
      showOPInfo("全屏失败！", oError.errorCode, oError.errorMsg);
    });
  }

  // 搜索录像
  var g_iSearchTimes = 0;
  // 下载录像
  var g_iDownloadID = -1;
  var g_tDownloadProcess = 0;

  // 重连
  function reconnect(szDeviceIdentify) {
    WebVideoCtrl.I_Reconnect(szDeviceIdentify, {
      timeout: 3000,
      success: function (xmlDoc) {
        // $("#restartDiv").remove();
      },
      error: function () {
        setTimeout(function () { reconnect(szDeviceIdentify); }, 5000);
      }
    });
  }

  function loadXML(szXml) {
    if (null == szXml || "" == szXml) {
      return null;
    }

    var oXmlDoc = null;

    if (window.DOMParser) {
      var oParser = new DOMParser();
      oXmlDoc = oParser.parseFromString(szXml, "text/xml");
    } else {
      oXmlDoc = new ActiveXObject("Microsoft.XMLDOM");
      oXmlDoc.async = false;
      oXmlDoc.loadXML(szXml);
    }

    return oXmlDoc;
  }

  function toXMLStr(oXmlDoc) {
    var szXmlDoc = "";

    try {
      var oSerializer = new XMLSerializer();
      szXmlDoc = oSerializer.serializeToString(oXmlDoc);
    } catch (e) {
      try {
        szXmlDoc = oXmlDoc.xml;
      } catch (e) {
        return "";
      }
    }
    if (szXmlDoc.indexOf("<?xml") == -1) {
      szXmlDoc = "<?xml version='1.0' encoding='utf-8'?>" + szXmlDoc;
    }

    return szXmlDoc;
  }

  function encodeString(str) {
    if (str) {
      return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    } else {
      return "";
    }
  }
  // 源代码结束

</script>

</html>
<style>
  input[type="range"]::-webkit-slider-thumb {
    /* -webkit-appearance: none; */
    /* width: 20px;
    height: 20px;
    border-radius: 50%; */
    /* 圆形 */
    /* background-color: #4CAF50; */
    cursor: pointer;
  }
</style>